
  <template>
  <div>
    <router-link to="/user">
      <van-nav-bar left-arrow title="设置支付密码" />
    </router-link>
    <van-form @submit="handleSubmit">
      <van-field
        v-model="form.payPassword"
        label="支付密码"
        type="password"
        placeholder="请输入支付密码"
        :rules="payPasswordRules"
      ></van-field>
      <van-field
        v-model="form.payPasswordAgain"
        label="确认支付密码"
        type="password"
        placeholder="请再次输入支付密码"
        :rules="payPasswordAgainRules"
      ></van-field>
      <van-field
        v-model="form.password"
        label="登录密码"
        type="password"
        placeholder="请输入登录密码"
        :rules="passwordRules"
      ></van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        payPassword: "",
        payPasswordAgain: "",
        password: "",
      },
      payPasswordRules: [
        { required: true, message: "请输入支付密码" },
        { pattern: /^\d{6}$/, message: "支付密码必须为6位数字" },
      ],
      payPasswordAgainRules: [
        { required: true, message: "请再次输入支付密码" },
        {
          validator: this.validatePayPasswordAgain,
          message: "两次输入的密码不一致",
        },
        { pattern: /^\d{6}$/, message: "支付密码必须为6位数字" },
      ],
      passwordRules: [{ required: true, message: "请输入新密码" }],
    };
  },
  methods: {
    handleSubmit() {
      // 表单提交逻辑
      this.req.put("/user/payPwd", this.form).then((res) => {
        if (res.status === 400) {
          this.$notify({
            type: "danger",
            message: res.msg,
          });
          this.form = {
            payPassword: "",
            payPasswordAgain: "",
            password: "",
          };
        } else {
          this.$notify({
            type: "success",
            message: "设置成功",
          });
          this.$router.push("/user");
        }
      });
      console.log(this.form);
    },
    validatePayPasswordAgain(val) {
      if (val !== this.form.payPassword) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>
